<template>
<div>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    background-color="#101010"
    text-color="#FFFFFF"

>
<i :style="iconStyle" class="iconfont">&#xe701;</i>
    <el-menu-item  :style="styleObj"  index="4">后台管理</el-menu-item>
    <el-menu-item @click="pushLogin"  active-class="active"  :style="styleObj" index="3">
      <template  slot="title">登录</template>
    </el-menu-item>
    <el-menu-item @click="pushUpload"  active-class="active" :style="styleObj" index="2">图片上传</el-menu-item>
    <el-menu-item   @click="pushHomePage" active-class="active" :style="styleObj" index="1"
      >首页</el-menu-item
    >
    <span :style="iconStyle" class="bookSize">BookShare</span>
  </el-menu>
  <router-view></router-view>
</div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      src:'https://img-blog.csdnimg.cn/bef17a92e1ee419bbeefed25fcda773e.png',
      styleObj:{
        fontSize:'15px',
        float:'right',
        'margin-right':'40px',
        'margin-top':'20px'
    },
     iconStyle:{
       fontSize:'40px',
       color:'#FFFFFF',
       'margin-left':'40px'
     },
   

   
  }
  },
   methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      pushUpload(){
        this.$router.push({
           path:'/imageUpload'
         })

      },
      
       pushHomePage(){
         this.$router.push({
           path:'/HomePage'
         })
       },
     pushLogin(){
        this.$router.push({
          path:'/Login'
        })
      },
    }
}
</script>

<style>
.bookSize{
color: transparent;
background-color : blue;
text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
-webkit-background-clip : text
}

 
</style>
